<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('选择图片')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body>
    <div class="main-content">
        <form id="form-user-add" class="form-horizontal">
            <h4 class="form-header h4">图片列表（<i th:text="${bicycle.name}"></i>）</h4>
            <div class="row">
                <div class="col-sm-12">
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
            </div>
            <h4 class="form-header h4">图片上传<i>（总数最多 <i style="color: #2de144">5</i>，还可上传 <i id="maxNum" style="color: #d20404"></i> 张）</i></h4>
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div class="form-group">
                                <div class="file-loading">
                                    <input id="multipleFile" name="files" type="file" multiple>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="btn-group-sm" id="toolbar" role="group">
        <a class="btn btn-danger multiple disabled" onclick="removeAll()">
            <i class="fa fa-remove"></i> 删除
        </a>
        <a class="btn btn-sm btn-primary" onclick="closeItem()">
            <i class="fa fa-reply-all"></i> 返回
        </a>
    </div>
	<th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
	<script th:inline="javascript">
	    var prefix = ctx + "admin/bicycle/selectImage";
	    var images = [[${images}]]
        var bikId = [[${bicycle.bikId}]]
        var imgNum = images.length;
        var selectNum = 5 - imgNum
        var removeFlag = [[${@permission.hasPermi('admin:bicycle:remove')}]];

        $(document).ready(function () {
            // 多图上传
            $("#multipleFile").fileinput({
                uploadUrl: prefix + '/uploads',
                uploadAsync: false,
                language : 'zh',
                maxFileCount: selectNum,
                allowedPreviewTypes : [ 'image' ],
                allowedFileExtensions: ['jpg', 'png'],
                uploadExtraData: {bikId: bikId, imgNum: imgNum}
            }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
                var rsp = data.response;
                log.info("return urls：" + rsp.urls)
                log.info("reutrn fileNames：" + rsp.fileNames)
            }).on('fileremoved', function (event, id, index) {
                $("input[name='" + event.currentTarget.id + "']").val('')
            })
        });

        //表格初始化
	    $(function() {
		    var options = {
		        data: images,
		        sidePagination: "client",
                removeUrl: ctx + "admin/images/remove",
		        showSearch: false,
                showRefresh: false,
                showColumns: false,
                clickToSelect: true,
                maintainSelected: true,
		        columns: [{
		            checkbox: true,
		            formatter:function (value, row, index) {
		            	if($.common.isEmpty(value)) {
		            		return { checked: row.flag };
		            	} else {
		            		return { checked: value }
		            	}
		            }
		        },
		        {
		            field: 'imagesId',
		            title: '图片编号',
                    align: 'center'
		        },
                {
                    field: 'images',
                    title: '图片',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return $.table.imageView(row.images,600,600);
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="remove(\'' + row.imagesId + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
		    };
		    $.table.init(options);

            //初始化最多上传数量
            $('#maxNum').text(selectNum);
		});

        // 批量删除信息
        function removeAll() {
            table.set();
            var rows = $.common.isEmpty(table.options.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(table.options.uniqueId);
            if (rows.length == 0) {
                $.modal.alertWarning("请至少选择一条记录");
                return;
            }
            $.modal.confirm("确认要删除选中的" + rows.length + "条数据吗?", function() {
                var url = table.options.removeUrl;
                var data = { "ids": rows.join() };
                submit(url, "post", "json", data);
            });
        }

        // 删除信息
        function remove(id) {
            table.set();
            $.modal.confirm("确定删除该条信息吗？", function() {
                var url = $.common.isEmpty(id) ? table.options.removeUrl : table.options.removeUrl.replace("{id}", id);
                if(table.options.type == table_type.bootstrapTreeTable) {
                    submit(url, "get", "json", "", callback);
                } else {
                    var data = { "ids": id };
                    submit(url, "post", "json", data);
                }
            });
        }

        // 提交数据
        function submit(url, type, dataType, data, callback) {
            var config = {
                url: url,
                type: type,
                dataType: dataType,
                data: data,
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍候...");
                },
                success: function(result) {
                    if (typeof callback == "function") {
                        callback(result);
                    }
                   // $.operate.successTabCallback(result);
                    $.operate.saveReload(result);
                }
            };
            $.ajax(config)
        }
    </script>
</body>
</html>